<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>二级标签栏</title>
		<style type="text/css">
			/*把所有表单格式  0px为无边距形式*/
			ul,li{
				padding: 0px;
				margin:  0px;
			}
			/*设置所有表格的样式*/
			ul>li {
				width:60px;
				height: 30px;
				list-style-type: none;
				float : left;
				border: 1px solid black;
				text-align: center;
				line-height: 30px;
			}
			/*设置所有超链接的样式*/
			a {
				text-decoration: none;
				color: red;
				font-size: small;
			}
			/*设置二级标签栏展开的样式 注意统一一致性*/
			#news{
				width: 60px;
				height: 60px;
				border: 1px solid blue;
			}
			/*设置标签栏为隐藏形式（默认）利用函数控制隐和显*/
			#news{
				display: none;
			}
			#news3{
				width: 60px;
				height: 60px;
				border: 1px solid pink;
				position: relative;
				top: -30px;
				left: 60px;
				display: none;
			}
		</style>
	</head>
	<body>
		<ul>
			<!--利用鼠标放置或者移开作为函数的开关口-->
			<li id="news_open_off" onmouseenter="news_open()" onmouseleave="news_off()">
				<a href="">新闻</a>
				<ul id="news">
					<li><a href="www.baidu.com">国内新闻</a></li>
					<li id="news_open_off_3" onmouseenter="news_open_3()" onmouseleave="news_off_3()">
						<a href="www.sina.com">国外新闻</a>
						<!--三级标签应用-->
						<ul id="news3">
							<li><a href="www.baidu.com">美国新闻</a></li>	
							<li><a href="www.baidu.com">中国新闻</a></li>
						</ul>
					</li>
				</ul>
			<li><a href="">体育</a></li> 
			<li><a href="">外语</a></li>
			<li><a href="">娱乐</a></li>
			<li><a href="">财经</a></li>
		</ul>
		<script type="text/javascript">
			// 打开函数
			function news_open(){
				var el = document.getElementById("news");
				// ‘’ 的原因是它不是标签类样式
				el.style.display = 'block';
			}
			// 关闭函数
			function news_off(){
				var el = document.getElementById("news");
				el.style.display = 'none';
			}
			
			// 三级标签的打开函数
			function news_open_3(){
				var el = document.getElementById("news3");
				el.style.display = 'block';
			}
			function news_off_3(){
				var el = document.getElementById("news3");
				el.style.display = 'none';
			}
		</script>
	</body>
</html>
